<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分效果</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2107815_byv17nge3kh.css">
    <style>
        .star {
            font-size: 30px;
            color: red;
        }
    </style>
</head>

<body>
    <div id="box">
    </div>
</body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let count = 10   //生成10个星星
        let score = 5    //前5个是实心的

        //生成i标签
        for(let i=0;i<count;i++){
            //生成指定数量的i标签，并添加到#box中
            let i = $('<i/>').addClass('star iconfont')
            $('#box').append(i)
            showStar()  //显示Star的样式
        }
        //显示Star的样式
        function showStar(){
            //each()方法，用于遍历出所有的元素
            //回调函数里面可以传2个参数，分别是索引和遍历出来的dom元素
            // $('#box i').each(function(i,item){
            //     if(i<score){
            //         //将dom对象，转为jquery对象，并通过addClass()方法添加样式
            //         $(item).addClass('iconstar1')
            //     }else{
            //         $(item).addClass('iconstar')
            //     }
            // })
            
            $(`#box i:lt(${score})`).removeClass('iconstar').addClass('iconstar1')
            $(`#box i:gt(${score-1})`).removeClass('iconstar1').addClass('iconstar')
        }

        //分别设置鼠标进入，鼠标离开，鼠标点击事件
        $('#box i').mouseover(function(){
            //获取鼠标所在位置的索引
            let index = $(this).index()
            $(`#box i:lt(${index+1})`).removeClass('iconstar').addClass('iconstar1')
            $(`#box i:gt(${index})`).removeClass('iconstar1').addClass('iconstar')
        }).mouseout(function(){
            //恢复默认样式
            showStar()
        }).click(function(){
            //获取鼠标所在位置的索引
            let index = $(this).index()
            //更新最新的score值
            score = index+1
        })
        
    </script>
</html>